/**
 * @fileoverview Monitor template for the EV3 modification.
 *
 * @license Copyright 2018 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */
{namespace cwc.soy.mode.ev3.Monitor autoescape="strict"}


/**
 * Monitor template.
 */
{template .template}
  {@param devices: ?}
  {@param prefix: string}

  <div id="{$prefix}body">

    {if $devices}
      {foreach $device in keys($devices)}
        {if $devices[$device]}
          {call .interfacePort_}
            {param prefix: $prefix /}
            {param mode: $devices[$device]['mode'] /}
            {param port: $device /}
            {param type: $devices[$device]['type'] /}
          {/call}
        {/if}
      {/foreach}
    {else}
      <div class="mdl-spinner mdl-js-spinner is-active"></div>
      Waiting for data ...
    {/if}

    <button id="{$prefix}refresh" class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
      <i class="material-icons">update</i>
    </button>
  </div>
{/template}


/**
 * Port monitor.
 */
{template .interfacePort_ private="true"}
  {@param prefix: string}
  {@param mode: number}
  {@param port: string}
  {@param type: string}
  
  <div class="{$prefix}interface-view">
    <div class="{$prefix}interface-view-info">
      <span>{$port}</span>
      <span id="{$prefix}port-{$port}-value">-</span>
    </div>
    <div class="{$prefix}interface-view-type">
      <span title="mode: {$mode}">{$type}</span>
    </div>
  </div>
{/template}
